<template>
  <div class="table-component">
    <el-table
      :data="modelValue.dataList"
      border
      stripe
      style="width: 100%"
      v-loading="modelValue.tableLoading"
    >
      <template v-for="item in modelValue.columnList" :key="item.prop">
        <el-table-column
          v-if="item.prop == 'operator'"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          fixed="right"
        >
          <template #default="scope">
            <div class="operator-list">
              <el-button
                v-for="row in item.operatorList"
                :key="row.text"
                :type="row.type"
                size="small"
                @click.prevent="row.handle(scope.row)"
              >
                <i
                  style="font-weight: bold; margin-right: 2px; font-size: 13px"
                  v-if="row.icon"
                  class="iconfont"
                  :class="row.icon"
                ></i>
                <span>{{ row.text }}</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
        >
          <template #default="{ row }">
            <div>{{ row[item.prop] }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script  setup lang='ts'>
import { effect } from "vue";
const props = defineProps(["modelValue"]);

effect(() => {
  console.log("props.modelValue: ", props.modelValue);
});
</script>
<style lang='scss' scoped>
</style>
